<template>
  <view class="page-login">
    <view class="we" v-if="showElement">
      <i></i>
      <image
        class=""
        src="https://ryb.ruifengcloud.com/imgs/guodao.png"
        mode="widthFix"
      ></image>
    </view>

    <image
      class="bg"
      src="https://ryb.ruifengcloud.com/imgs/l1.png"
      mode="widthFix"
    ></image>

    <view class="login-bd">
      <view class="text">
        <view>欢迎使用</view>
      </view>
      <u--form labelWidth="0" :model="form" :rules="rules" ref="uForm">
        <u-form-item prop="username">
          <view class="form-item rbox box_y_center">
            <image
              class="icon"
              src="https://ryb.ruifengcloud.com/imgs/l2.png"
              mode="widthFix"
            ></image>
            <u--input
              v-model="form.username"
              border="none"
              :clearable="true"
              placeholder="输入您的手机号"
              class="jinput"
            ></u--input>
          </view>
        </u-form-item>
        <u-form-item prop="password">
          <view class="form-item rbox box_y_center">
            <image
              class="icon"
              src="https://ryb.ruifengcloud.com/imgs/l3.png"
              mode="widthFix"
            ></image>
            <u--input
              v-model="form.password"
              border="none"
              :clearable="true"
              placeholder="输入您的密码"
              type="password"
              class="jinput"
            ></u--input>
          </view>
        </u-form-item>
        <view class="forg"></view>
        <u-form-item
          :class="
            form.username && form.password ? 'login_bt' : 'login_bt login_bt_no'
          "
        >
          <u-button
            class="logbt"
            type="primary"
            :text="loginText"
            shape="circle"
            :loading="isDisabled"
            :color="
              form.username && form.password
                ? 'linear-gradient( 90deg, rgb(75,95,255) 0%, rgb(8,82,183) 100%)'
                : 'linear-gradient(270deg,#a7a7a7, #a7a7a7)'
            "
            size="large"
            @click="submit"
          ></u-button>
        </u-form-item>
      </u--form>
    </view>
    <!-- <view class="reg">注 册</view> -->

    <view class="footer">
      <!-- 版权所有：江城中澳农业科技发展有限公司<br /> -->
      版权所有：江苏瑞丰信息技术股份有限公司
    </view>
  </view>
</template>

<script>
import { getInfo } from "@/config/api.js";

export default {
  data() {
    return {
      showElement: false, // 控制元素的显示和隐藏
      isDisabled: false,
      loginText: "登录/注册",
      form: {
        // username: "xinnongren",
        // password: "123456",
        username: "",
        password: "",
      },
      rules: {
        username: {
          type: "string",
          required: true,
          message: "请输入账号",
          trigger: ["blur", "change"],
        },
        password: {
          type: "string",
          required: true,
          message: "请输入密码",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  onLoad() {
    // 判断是否登录
    // if (uni.setStorageSync("loginTokens")) {
    //   this.loginInfo();
    // }
  },
  onShow() {
    // uni.clearStorageSync("identify");
  },

  mounted() {
    setTimeout(() => {
      this.showElement = false; // 3秒后隐藏元素
    }, 4000);
  },

  methods: {
    // 模拟
    old_submit() {
      const username = this.form.username;
      const password = this.form.password;
      let identify = "";

      // 根据用户名和密码来确定身份
      if (username === "user" && password === "123456") {
        identify = "buy";
      } else if (username === "xinnongren" && password === "123456") {
        identify = "admin";
      } else {
        // 用户名或密码错误
        uni.$u.toast("用户名或密码错误");
        return;
      }
      //本地存储
      uni.setStorageSync("identify", identify);

      // 跳转到首页
      uni.switchTab({
        url: "/pages/index/index",
      });
    },

    // 登录
    loginInfo() {
      getInfo().then((res) => {
        console.log(res);
        if (res.code != 200) {
          // uni.$u.toast(res.msg)
        } else {
          //本地存储
          uni.setStorageSync("identify", res.identify);

          // 跳转到首页
          uni.switchTab({
            url: "/pages/index/index",
          });
        }
      });
    },
    // 提交
    submit() {
      if (this.isDisabled) {
        return; // 若按钮已经处于禁用状态，则直接返回，无法进行后续操作
      } else {
        // uni.switchTab({
        //   url: "/pages/index/index",
        // });
        // return;

        this.$refs.uForm
          .validate()
          .then((res) => {
            this.isDisabled = true; // 将按钮状态设为禁用
            this.loginText = "登录中..";

            this.$store
              .dispatch("Login", this.form)
              .then((res) => {
                console.log(res);
                // 完成操作后，将按钮状态设为非禁用
                this.isDisabled = false;
                this.loginText = "登录/注册";
                //             if (res.code != 0) {
                //               uni.$u.toast(res.msg);

                //             } else {

                //本地存储
                uni.setStorageSync("loginTokens", res.accessToken);
                uni.setStorageSync("userId", res.userId);

                // 跳转到首页
                uni.switchTab({
                  url: "/pages/index/index",
                });

                // this.loginInfo();
                // }
              })
              .catch((error) => {
                // console.log("Loginerror",error);
                //           uni.$u.toast("网络请求失败，请稍后再试");
                this.isDisabled = false;
                this.loginText = "登录/注册";
                // console.error("访问接口请求失败");
                // 在这里处理请求失败的情况
              });
          })
          .catch((errors) => {
            // uni.$u.toast('请检查输入')
          });
      }
    },
  },
};
</script>

<style lang="scss">
@keyframes jfadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

.we {
  opacity: 1;
  transform: scale(1);
  animation: 2s jfadeOut 2s ease-in-out;
  animation-fill-mode: forwards;
  z-index: 99;
  width: 100%;
  height: 100%;
  display: block;

  background-size: 100% auto;
  position: fixed;
}

.we i {
  width: 520rpx;
  height: 620rpx;
  display: block;
  float: left;
  margin: 750rpx 115rpx 26rpx;

  background-size: 100%;
  opacity: 0;
  transform: scale(0);
  animation: jfadeIn 1.5s ease-in-out;
  animation-fill-mode: forwards;
}

.we image {
  width: 185rpx;
  height: 55rpx;
  display: block;
  position: fixed;
  left: 282rpx;
  bottom: 50rpx;
}

@keyframes jfadeIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reg {
  width: 100%;
  font-size: 28rpx;
  color: #242424;
  text-align: center;
  margin: 100rpx 0 0;
  opacity: 0.5;
}

.logbt {
  width: 479rpx;
  height: 80rpx;
  font-size: 30rpx;
  line-height: 80rpx;
  position: absolute;
  left: 80rpx;
  bottom: -40rpx;
  margin: 0;
}

.forg {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 30rpx 50rpx 40rpx;
  font-size: 24rpx;
  color: #0086ff;
  text-align: right;
}

.footer {
  position: fixed;
  bottom: 50rpx;
  width: 100%;
  line-height: 33rpx;
  color: #b8b7b7;
  font-size: 20rpx;
  text-align: center;
}

@keyframes move-up {
  0% {
    transform: translateY(50px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

::v-deep .u-loading-icon__spinner {
  color: #fff !important;
  margin: 0 5px -2px 0;
}

.page-login {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;

  .bg {
    width: 100%;
    top: 0;
    left: 0;
  }

  .login-hd {
    text-align: center;
    padding-top: 50rpx;
    animation: fadeInDown 0.8s ease-out;
    // animation: move-up .5s ease-out;
  }

  .login-bd {
    box-shadow: 0px 20px 37px 13px rgba(180, 120, 37, 0.1);

    background-color: rgb(255, 255, 255);

    width: 651rpx;

    margin: -450rpx auto 0;

    z-index: 95;
    background: #ffffff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 0 26rpx 70rpx;
    box-sizing: border-box;
    position: relative;

    // animation: move-up 1s ease-out;
    .text {
      text-align: left;
      font-size: 48rpx;
      line-height: 55rpx;
      font-weight: 500;
      color: #3e4a59;
      letter-spacing: 1rpx;
      margin: 0rpx auto 0;
      box-sizing: border-box;
      padding: 46rpx 0 30rpx 50rpx;
      // animation: fadeInLeft 0.8s ease-out;
    }

    .form-item {
      // animation: fadeInLeft 1s ease-out;
      border-bottom: 1px solid #e5e5e5;
      flex: 1;
      box-sizing: border-box;
      padding: 20rpx 30rpx;

      .icon {
        width: 52rpx;
        margin-right: 20rpx;
      }
    }
  }
}

.login_bt {
  margin-top: -60rpx;
  // animation: fadeInLeft 1.2s ease-out;
}

.login_bt_no {
  opacity: 1;
}
</style>
